<template>
  <div>
    <div class="patent-item" v-for="(item,index) in patentList" :key="index">
      <el-row >
        <el-col :span="4" class="vertical-center">
          <div class="blue-circle">需求</div>
        </el-col>
        <el-col :span="14">
          <div>
            <!--            名称-->
            <div class="patent-item-name">
              {{item.name}}
            </div>
            <!--            分类-->
            <div class="text-font">
              <span> <i class="el-icon-document"></i></span>
              分类: {{item.class}}
            </div>
            <!--            其他基本信息-->
            <div class="text-font">
              <el-row>
                <el-col :span="12">
                  <i class="el-icon-location-outline"></i>
                  {{item.location}}
                </el-col>
                <el-col :span="12">
                  <i class="el-icon-alarm-clock"></i>
                  截止时间: {{item.deadline}}
                </el-col>
              </el-row>
            </div>

          </div>
        </el-col>
        <el-col :span="6">
          <div :class="[item.state==0?'move-up':'','price-font']">
            {{item.price}}
            <span class="unit-font" v-if="item.price != '面议'">万元</span>
          </div>
          <!--          状态标志-->
          <div class="status-flag" v-if="item.state == 0">
            <!--              已结束标志-->
            <div class="border-out">
              <div class="border-inside">
                - 已结算 -
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "DemandList",
  data() {
    return {
      patentList:[
        {
          name:'一种适用于批量制造的电磁铁的玄铁部件结构',
          class:'制造业-金属制品、机械和设备修理业',
          location:'福建省泉州市丰泽区',
          deadline:'2022-5-10',
          price:'面议',
          hot:true,
          state:1,//需求状态：1 需求中 0 已结束
          id:65885
        },
        {
          name:'一种适用于批量制造的电磁铁的玄铁部件结构',
          class:'制造业-金属制品、机械和设备修理业',
          location:'福建省泉州市丰泽区',
          deadline:'2022-5-10',
          price:'面议',
          hot:true,
          state:1,//需求状态：1 需求中 0 已结束
          id:65885
        },
        {
          name:'一种适用于批量制造的电磁铁的玄铁部件结构',
          class:'制造业-金属制品、机械和设备修理业',
          location:'福建省泉州市丰泽区',
          deadline:'2022-5-10',
          price:'50',
          hot:true,
          state:0,//需求状态：1 需求中 0 已结束
          id:65885
        },
        {
          name:'一种适用于批量制造的电磁铁的玄铁部件结构',
          class:'制造业-金属制品、机械和设备修理业',
          location:'福建省泉州市丰泽区',
          deadline:'2022-5-10',
          price:'100',
          hot:true,
          state:0,//需求状态：1 需求中 0 已结束
          id:65885
        }
      ]
    }
  }
}
</script>

<style scoped>
.patent-item {
  padding: 10px;
  box-shadow:2px 2px 5px #aaa;
  margin-top: 20px;
  font-family: 微软雅黑;
}
.blue-circle {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: #2954A2;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.patent-item-name {
  font-size: 18px;
  font-weight: bold;
  color: #2F2F2F;
}
.text-font {
  color: #666666;
  font-size: 12px;
  margin-top: 10px;
}
.text-font i {
  font-weight: bold;
}
.price-font {
  font-size: 30px;
  color: #FD3A0C;
  font-weight: bold;
  line-height: 80px;
}
.move-up {
  margin-top: -20px;
}
.unit-font {
  font-size: 20px;
  margin-left: 2px;
}
.status-flag {
  position: absolute;
  top:18px;
  z-index: -1;
  right: 12px;
}
.border-out {
  border: 4px solid #DCD6D6;
  border-radius: 50%;
  padding: 5px;
}
.border-inside {
  border: 2px solid #DCD6D6;
  border-radius: 50%;
  font-size: 18px;
  color: #DCD6D6;
  text-align: center;
  font-weight: bolder;
  padding: 10px;
}
</style>